import React, { Component, PropTypes } from 'react';
import Module from '../../lib/module'

import { Button, Slider, Tooltip, Row, Col, Icon } from 'antd';

class CarShow2D extends Module {
    constructor(props, context) {
        super(props, context);
        this.state = {
            marks: {
                0: '0°',
                12.5: '45°',
                25: '90°',
                37.5: '135°',
                50: '180°',
                62.5: '225°',
                75: '270°',
                87.5: '315°',
                100: '360°',
            },
            car1Map: {
                "0": 'images/car1/car1-0.png',
                "12.5": 'images/car1/car1-45.png',
                "25": 'images/car1/car1-90.png',
                "37.5": 'images/car1/car1-135.png',
                "50": 'images/car1/car1-180.png',
                "62.5": 'images/car1/car1-225.png',
                "75": 'images/car1/car1-270.png',
                "87.5": 'images/car1/car1-315.png',
                "100": 'images/car1/car1-0.png',

            },
            car2Map: {
                "0": 'images/car2/car2-0.png',
                "12.5": 'images/car2/car2-45.png',
                "25": 'images/car2/car2-90.png',
                "37.5": 'images/car2/car2-135.png',
                "50": 'images/car2/car2-180.png',
                "62.5": 'images/car2/car2-225.png',
                "75": 'images/car2/car2-270.png',
                "87.5": 'images/car2/car2-315.png',
                "100": 'images/car2/car2-0.png',

            },
            currentAngle: 0,    //当前车辆角度
        };
    }

    componentDidMount() {
        this.renderGauge()
    }

    componentDidUpdate() {
        console.log("componentDidUpdate")
        this.renderGauge()
    }

    //仪表盘
    renderGauge() {
        let { status, speed } = this.props;
        if(status !== 1) {return false;}
        // 车辆路径
        let gauge = echarts.init(document.getElementById('gauge'));

        // 指定图表的配置项和数据
        let option = {
            series: [
                {
                    name: '速度',
                    type: 'gauge',
                    min: 0,
                    max: 60,
                    splitNumber:10,

                    //仪表盘轴线
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                            width: 3,
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },

                    //分隔线样式
                    splitLine: {           // 分隔线
                        length :15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width:2,
                            color: '#333',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },

                    //仪表盘指针
                    pointer: {
                        show: true,
                        length: '80%',
                        width: 4
                    },

                    //指针样式
                    itemStyle: {
                        color: '#1e90ff',
                        borderType: 'dotted'
                    },

                    //单位样式
                    title: {
                        offsetCenter: [0,'20%'],
                        textStyle: {
                            color: '#333',
                            fontSize: 20,
                        }
                    },

                    //值样式
                    detail: {
                        offsetCenter: [0,0],
                        formatter: function(value) {
                            return value
                        },
                        color: "#333"
                    },

                    //数据
                    data: [{value: speed, name: 'km/h'}]
                }
            ]
        };

        //使用刚指定的配置项和数据显示图表。
        gauge.setOption(option);
    }

    //车辆角度旋转
    handleSlider(val) {
        this.setState({
            currentAngle: val
        });
    }

    //车辆状态
    renderCarStatus() {
        let { status } = this.props;
        if(status === 0) {
            return (
                <div className="car-status rest">
                    休息中
                </div>
            )
        }
        if(status === 1) {
            return (
                <div className="car-status">
                    工作状态正常
                    <Button style={{marginLeft: '20px'}}>暂停运行</Button>
                </div>
            )
        }
        if(status === 2) {
            return (
                <div className="car-status failure">
                    状态异常
                </div>
            )
        }
    }

    render() {
        let { marks, car1Map, car2Map, currentAngle } = this.state;
        let { currentCar, status } = this.props;
        let cars;
        switch (currentCar) {
            case 'car1':
                cars = car1Map;
                break;
            case 'car2':
                cars = car2Map;
                break;
            default:
                cars = car1Map;
                break;
        };



        return <div className="car-show-2d">
            <div className="show-wrap">
                <img src={cars[currentAngle]} />
            </div>

            <div style={{width: "400px", margin: '0 auto'}}>
                <Slider marks={marks} step={null} value={currentAngle} onChange={(val)=> this.handleSlider(val)} />
            </div>

            {this.renderCarStatus()}

            <div className="driver-info">
                {(status === 1) && <p>驾驶会员: 孟志刚</p>}
                <p>当前工作时长: 22小时</p>
                <p>工作总时长: 460小时</p>
            </div>
            {
                (status === 1) && <div id="gauge" style={{width: "100%", height:"300px"}}></div>
            }

            {
                (status === 1) && (
                    <Row type="flex" justify="center">
                        <Col span={4} style={{textAlign: 'center'}}>
                            <div style={{fontSize: '20px'}}>10KM/H</div>
                            <div><Icon type="rocket" style={{color: "#ff6e6e"}} /> 加速度</div>
                        </Col>
                        <Col span={4} style={{textAlign: 'center'}}>
                            <div style={{fontSize: '20px'}}>20KM/H</div>
                            <div><Icon type="dashboard" style={{color: "#00ff00"}} /> 速度</div>
                        </Col>
                        <Col span={4} style={{textAlign: 'center'}}>
                            <div style={{fontSize: '20px'}}>15°</div>
                            <div><Icon type="sync" style={{color: "#6eecff"}} /> 旋转角度</div>
                        </Col>
                    </Row>
                )
            }

            {
                (status === 2) && <div className="car-plan">
                    <img src="images/car-plan.png"/>

                    <Tooltip placement="right"
                             title={
                                 <div>
                                    <div>异常问题: 方向盘异常</div>
                                    <div>异常时间: 2018-09-09 12:00</div>
                                    <div>维修记录: 无</div>
                                    <div>修理电话: 12312341234</div>
                                 </div>
                                 }
                    >
                        <div className="fix fix-a"></div>
                    </Tooltip>

                    <Tooltip placement="right" title={"异常原因"}>
                        <div className="fix fix-b"></div>
                    </Tooltip>

                    <Tooltip placement="right" title={"异常原因"}>
                        <div className="fix fix-c"></div>
                    </Tooltip>

                    <Tooltip placement="right" title={"异常原因"}>
                        <div className="fix fix-d"></div>
                    </Tooltip>

                </div>
            }

        </div>
    }
}

export default CarShow2D;